<HTML>
<HEAD>
<TITLE></TITLE>

<!-- this is need to make the icons look right!!!! -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="../css/dnd.css"/>
<link rel="stylesheet" type="text/css" href="../css/tabs.css"/>
</HEAD>

<BODY>

<script type="text/javascript" src="../js/Util.js"></script>
<script type="text/javascript" src="../js/MouseUtil.js"></script>
<script type="text/javascript" src="../js/Timer.js"></script>
<script type="text/javascript" src="../js/TimedUtil.js"></script>
<script type="text/javascript" src="../js/DragAndDrop.js"></script>
<script type="text/javascript" src="../js/Tabs.js"></script>

<div style="width:300px">
	<div class="drag_handle"><span>bear</span></div>
	<img src="../images/bear.jpg" />
	<p>I know, I know... bear with me...</p>
</div>


<ul>
	<strong class="drag_handle">Usage:</strong>
	<p>
		To make a node draggable, just include an element with the 
		class "drag_handle" and run <em>DragAndDrop.initDnd</em>.
	</p>
	<p>
		Only the handle is draggable. I will wrie a "resize" at 
		some point.
	</p>
	<p>
		I should also say that "drag and drop" is used in the sense of
		dynamic positioning, not in the sense of dragging things into things.
	</p>
	<p>
		That is to say, this is for UI, not to create trash bins and 
		other sorts of asinine nonsense.
	</p>
</ul>

<div id="movableTabs" class="tabs" style="width:200px;height:400px;position:absolute;top:2px;left:700px;">
	<div class="drag_handle">movable tabs!</div>

	<ul class="tabs_picker">
		<li>tab 1</li>
		<li>tab 2</li>
	</ul>

	<div class="tabs_area">
		<div class="tab">this is some text</div>

		<div class="tab">
			<p>
				this is some more text
		 	</p>
			<img src="../images/kah.png"/>
		</div>
	</div>
</div>

<script type="text/javascript">
var init = function() {
	 new Tabs( 'movableTabs' );
	 DragAndDrop.initDnd();
};

window.onload = init;
</script>

</BODY>
</HTML>
